<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Amaze UI Admin index Examples</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <script src="assets/js/echarts.min.js"></script>
    <link rel="stylesheet" href="assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="assets/css/amazeui.datatables.min.css" />
    <link rel="stylesheet" href="assets/css/app.css">
    <script src="assets/js/jquery.min.js"></script>

<style type="text/css">
.am-cf textarea{
    height: 100px;
}
</style>
</head>

<body data-type="widgets">
    <script src="assets/js/theme.js"></script>
    <div class="am-g tpl-g">
        <!-- 头部 -->
        <header>
            <!-- logo -->
            <div class="am-fl tpl-header-logo">
                <a href="javascript:;"><img src="assets/img/logo.png" alt=""></a>
            </div>
            <!-- 右侧内容 -->
            <div class="tpl-header-fluid">
                <!-- 侧边切换 -->
                <div class="am-fl tpl-header-switch-button am-icon-list">
                    <span>

                </span>
                </div>
                <!-- 搜索 -->
                <div class="am-fl tpl-header-search">
                    <form class="tpl-header-search-form" action="javascript:;">
                        <button class="tpl-header-search-btn am-icon-search"></button>
                        <input class="tpl-header-search-box" type="text" placeholder="搜索内容...">
                    </form>
                </div>
                <!-- 其它功能-->
                <div class="am-fr tpl-header-navbar">
                    <ul>
                        <!-- 欢迎语 -->
                        <li class="am-text-sm tpl-header-navbar-welcome">
                            <a href="javascript:;">欢迎你, <span>Amaze UI</span> </a>
                        </li>

                        <!-- 新邮件 -->
                        <li class="am-dropdown tpl-dropdown" data-am-dropdown>
                            <a href="javascript:;" class="am-dropdown-toggle tpl-dropdown-toggle" data-am-dropdown-toggle>
                                <i class="am-icon-envelope"></i>
                                <span class="am-badge am-badge-success am-round item-feed-badge">4</span>
                            </a>
                            <!-- 弹出列表 -->
                            <ul class="am-dropdown-content tpl-dropdown-content">
                                <li class="tpl-dropdown-menu-messages">
                                    <a href="javascript:;" class="tpl-dropdown-menu-messages-item am-cf">
                                        <div class="menu-messages-ico">
                                            <img src="assets/img/user04.png" alt="">
                                        </div>
                                        <div class="menu-messages-time">
                                            3小时前
                                        </div>
                                        <div class="menu-messages-content">
                                            <div class="menu-messages-content-title">
                                                <i class="am-icon-circle-o am-text-success"></i>
                                                <span>夕风色</span>
                                            </div>
                                            <div class="am-text-truncate"> Amaze UI 的诞生，依托于 GitHub 及其他技术社区上一些优秀的资源；Amaze UI 的成长，则离不开用户的支持。 </div>
                                            <div class="menu-messages-content-time">2016-09-21 下午 16:40</div>
                                        </div>
                                    </a>
                                </li>

                                <li class="tpl-dropdown-menu-messages">
                                    <a href="javascript:;" class="tpl-dropdown-menu-messages-item am-cf">
                                        <div class="menu-messages-ico">
                                            <img src="assets/img/user02.png" alt="">
                                        </div>
                                        <div class="menu-messages-time">
                                            5天前
                                        </div>
                                        <div class="menu-messages-content">
                                            <div class="menu-messages-content-title">
                                                <i class="am-icon-circle-o am-text-warning"></i>
                                                <span>禁言小张</span>
                                            </div>
                                            <div class="am-text-truncate"> 为了能最准确的传达所描述的问题， 建议你在反馈时附上演示，方便我们理解。 </div>
                                            <div class="menu-messages-content-time">2016-09-16 上午 09:23</div>
                                        </div>
                                    </a>
                                </li>
                                <li class="tpl-dropdown-menu-messages">
                                    <a href="javascript:;" class="tpl-dropdown-menu-messages-item am-cf">
                                        <i class="am-icon-circle-o"></i> 进入列表…
                                    </a>
                                </li>
                            </ul>
                        </li>

                        <!-- 新提示 -->
                        <li class="am-dropdown" data-am-dropdown>
                            <a href="javascript:;" class="am-dropdown-toggle" data-am-dropdown-toggle>
                                <i class="am-icon-bell"></i>
                                <span class="am-badge am-badge-warning am-round item-feed-badge">5</span>
                            </a>

                            <!-- 弹出列表 -->
                            <ul class="am-dropdown-content tpl-dropdown-content">
                                <li class="tpl-dropdown-menu-notifications">
                                    <a href="javascript:;" class="tpl-dropdown-menu-notifications-item am-cf">
                                        <div class="tpl-dropdown-menu-notifications-title">
                                            <i class="am-icon-line-chart"></i>
                                            <span> 有6笔新的销售订单</span>
                                        </div>
                                        <div class="tpl-dropdown-menu-notifications-time">
                                            12分钟前
                                        </div>
                                    </a>
                                </li>
                                <li class="tpl-dropdown-menu-notifications">
                                    <a href="javascript:;" class="tpl-dropdown-menu-notifications-item am-cf">
                                        <div class="tpl-dropdown-menu-notifications-title">
                                            <i class="am-icon-star"></i>
                                            <span> 有3个来自人事部的消息</span>
                                        </div>
                                        <div class="tpl-dropdown-menu-notifications-time">
                                            30分钟前
                                        </div>
                                    </a>
                                </li>
                                <li class="tpl-dropdown-menu-notifications">
                                    <a href="javascript:;" class="tpl-dropdown-menu-notifications-item am-cf">
                                        <div class="tpl-dropdown-menu-notifications-title">
                                            <i class="am-icon-folder-o"></i>
                                            <span> 上午开会记录存档</span>
                                        </div>
                                        <div class="tpl-dropdown-menu-notifications-time">
                                            1天前
                                        </div>
                                    </a>
                                </li>


                                <li class="tpl-dropdown-menu-notifications">
                                    <a href="javascript:;" class="tpl-dropdown-menu-notifications-item am-cf">
                                        <i class="am-icon-bell"></i> 进入列表…
                                    </a>
                                </li>
                            </ul>
                        </li>

                        <!-- 退出 -->
                        <li class="am-text-sm">
                            <a href="javascript:;">
                                <span class="am-icon-sign-out"></span> 退出
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

        </header>
        <!-- 风格切换 -->
        <div class="tpl-skiner">
            <div class="tpl-skiner-toggle am-icon-cog">
            </div>
            <div class="tpl-skiner-content">
                <div class="tpl-skiner-content-title">
                    选择主题
                </div>
                <div class="tpl-skiner-content-bar">
                    <span class="skiner-color skiner-white" data-color="theme-white"></span>
                    <span class="skiner-color skiner-black" data-color="theme-black"></span>
                </div>
            </div>
        </div>
        <!-- 侧边导航栏 -->
        <div class="left-sidebar">
            <!-- 用户信息 -->
            <div class="tpl-sidebar-user-panel">
                <div class="tpl-user-panel-slide-toggleable">
                    <div class="tpl-user-panel-profile-picture">
                        <img src="assets/img/user04.png" alt="">
                    </div>
                    <span class="user-panel-logged-in-text">
              <i class="am-icon-circle-o am-text-success tpl-user-panel-status-icon"></i>
              禁言小张
          </span>
                    <a href="javascript:;" class="tpl-user-panel-action-link"> <span class="am-icon-pencil"></span> 账号设置</a>
                </div>
            </div>

            <!-- 菜单 -->
            <ul class="sidebar-nav">
                <li class="sidebar-nav-heading">Components <span class="sidebar-nav-heading-info"> 附加组件</span></li>
                <li class="sidebar-nav-link">
                    <a href="index.html">
                        <i class="am-icon-home sidebar-nav-link-logo"></i> 首页
                    </a>
                </li>
                <li class="sidebar-nav-link">
                    <a href="tables.html">
                        <i class="am-icon-table sidebar-nav-link-logo"></i> 表格
                    </a>
                </li>
                <li class="sidebar-nav-link">
                    <a href="calendar.html">
                        <i class="am-icon-calendar sidebar-nav-link-logo"></i> 日历
                    </a>
                </li>
                <li class="sidebar-nav-link">
                    <a href="form.html">
                        <i class="am-icon-wpforms sidebar-nav-link-logo"></i> 表单

                    </a>
                </li>
                <li class="sidebar-nav-link">
                    <a href="chart.html">
                        <i class="am-icon-bar-chart sidebar-nav-link-logo"></i> 图表

                    </a>
                </li>

                <li class="sidebar-nav-heading">Page<span class="sidebar-nav-heading-info"> 常用页面</span></li>
                <li class="sidebar-nav-link">
                    <a href="javascript:;" class="sidebar-nav-sub-title active">
                        <i class="am-icon-table sidebar-nav-link-logo"></i> 数据列表
                        <span class="am-icon-chevron-down am-fr am-margin-right-sm sidebar-nav-sub-ico sidebar-nav-sub-ico-rotate"></span>
                    </a>
                    <ul class="sidebar-nav sidebar-nav-sub" style="display: block;">
                        <li class="sidebar-nav-link">
                            <a href="table-list.html" class="sub-active">
                                <span class="am-icon-angle-right sidebar-nav-link-logo"></span> 文字列表
                            </a>
                        </li>

                        <li class="sidebar-nav-link">
                            <a href="table-list-img.html">
                                <span class="am-icon-angle-right sidebar-nav-link-logo"></span> 图文列表
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="sidebar-nav-link">
                    <a href="sign-up.html">
                        <i class="am-icon-clone sidebar-nav-link-logo"></i> 注册
                        <span class="am-badge am-badge-secondary sidebar-nav-link-logo-ico am-round am-fr am-margin-right-sm">6</span>
                    </a>
                </li>
                <li class="sidebar-nav-link">
                    <a href="login.html">
                        <i class="am-icon-key sidebar-nav-link-logo"></i> 登录
                    </a>
                </li>
                <li class="sidebar-nav-link">
                    <a href="404.html">
                        <i class="am-icon-tv sidebar-nav-link-logo"></i> 404错误
                    </a>
                </li>

            </ul>
        </div>

        <!-- 内容区域 -->
        <div class="tpl-content-wrapper">
            <div class="row-content am-cf">
                <div class="row">
                    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                        <div class="widget am-cf">
                            <div class="widget-head am-cf">
                                <div class="widget-title  am-cf">宝宝信息录入</div>
                            </div>

                            <!-- 宝宝信息录入 -->                
                            <form class="am-form tpl-form-border-form tpl-form-border-br">

                                <!-- 纸质档案编号-->
                                <div class="am-form-group am-u-md-12 am-u-lg-6">
                                    <label class="am-u-sm-3 am-form-label">纸质档案编号</label>
                                    <div class="am-u-sm-7">
                                        <input type="text" id="record_id" class="am-form-field tpl-form-no-bg" placeholder="请输入纸质档案编号,仅限于数字"  required="required" onkeyup="this.value=this.value.replace(/\D/g,'')" onblur="this.value=this.value.replace(/\D/g,'')" />
                                    </div>
                                    <div class="am-u-sm-2">
                                        <small>必填！</small>
                                    </div>
                                </div>

                                <!-- 宝宝姓名-->
                                <div class="am-form-group am-u-md-12 am-u-lg-6">
                                    <label class="am-u-sm-3 am-form-label">宝宝姓名</label>
                                    <div class="am-u-sm-7">
                                        <input type="text" id="baby_name" class="am-form-field tpl-form-no-bg" placeholder="请输入宝宝姓名"  required="required" />
                                    </div>
                                    <div class="am-u-sm-2">
                                        <small>必填！</small>
                                    </div>
                                </div>

                                <!-- 宝宝照片 -->
                                <div class="am-form-group am-u-md-12 am-u-lg-6">
                                    <label class="am-u-sm-3 am-form-label">宝宝照片</label>
                                    <div class="am-form-group am-u-sm-7">
                                        <div class="am-u-sm-7 am-form-file">
                                            <div class="am-u-sm-12">
                                                <button type="button" class="am-btn am-btn-danger am-btn-sm">
                                                <i class="am-icon-cloud-upload"></i> 添加宝宝照片</button>
                                                <input type="file" id="photo_up" onchange="LoadImg()" required="required" />
                                            </div>                                            
                                        </div>
                                        <div class="am-u-sm-5">
                                            <img class="am-u-sm-12" id="baby_photo" src="assets\img\111.jpg" alt="宝宝照片">
                                        </div>
                                    </div>
                                    <div class="am-u-sm-2">
                                        <small>必填！</small>
                                    </div>
                                </div>

                                <!-- 宝宝性别===性别校验-->
                                <div class="am-form-group am-u-md-12 am-u-lg-6">
                                    <label class="am-u-md-2 am-u-lg-3 am-form-label">宝宝性别</label>
                                    <div class="am-u-md-4 am-u-lg-7">                                            
                                        <div class="am-u-sm-12">
                                            <select id="baby_sex" data-am-selected="{btnSize: 'sm'}">
                                              <option value="man">男</option>
                                              <option value="woman">女</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="am-u-md-1 am-u-lg-2">
                                        <small>必填！</small>
                                    </div>

                                    <label class="am-u-md-2 am-u-lg-3 am-form-label">是否早产</label>
                                    <div class="am-u-md-2 am-u-lg-7" id="ispremature">
                                        <div class="am-form-group">
                                            <label class="am-radio-inline">
                                                <input type="radio" name="ispre" value="是"> 是
                                            </label>
                                            <label class="am-radio-inline">
                                                <input type="radio" name="ispre" checked="checked" value="否"> 否
                                            </label>
                                        </div>
                                    </div>

                                    <div class="am-u-md-1 am-u-lg-2">
                                        <small>必填！</small>
                                    </div>
                                </div>

                                <!-- 宝宝年龄-->
                                <div class="am-form-group am-u-md-12 am-u-lg-6">
                                    <label class="am-u-sm-3 am-form-label">宝宝年龄</label>
                                    <div class="am-u-sm-7">
                                        <input type="text" id="baby_age" class="am-form-field tpl-form-no-bg" placeholder="请输入宝宝年龄,仅限于数字" required="required" onkeyup="this.value=this.value.replace(/\D/g,'')" onblur="this.value=this.value.replace(/\D/g,'')" />
                                    </div>
                                    <div class="am-u-sm-2">
                                        <small>必填！</small>
                                    </div>
                                </div>

                                <!-- 宝宝体重-->
                                <div class="am-form-group am-u-md-12 am-u-lg-6">
                                    <label class="am-u-sm-3 am-form-label">宝宝体重</label>
                                    <div class="am-u-sm-7">
                                        <input type="text" id="baby_weight" class="am-form-field tpl-form-no-bg" placeholder="请输入宝宝体重(单位：kg),仅限于整数或小数" required="required" onkeyup="onlyNumber(this)" onblur="onlyNumber(this)" />
                                    </div>
                                    <div class="am-u-sm-2">
                                        <small>必填！</small>
                                    </div>
                                </div>

                                <!-- 宝宝身高-->
                                <div class="am-form-group am-u-md-12 am-u-lg-6">
                                    <label class="am-u-sm-3 am-form-label">宝宝身高</label>
                                    <div class="am-u-sm-7">
                                        <input type="text" id="baby_height" class="am-form-field tpl-form-no-bg" placeholder="请输入宝宝身高(单位：m),仅限于整数或小数" required="required" onkeyup="onlyNumber(this)" onblur="onlyNumber(this)" />
                                    </div>
                                    <div class="am-u-sm-2">
                                        <small>必填！</small>
                                    </div>
                                </div>

                                <!-- 出生日期 -->
                                <div class="am-form-group am-u-md-12 am-u-lg-6">
                                    <label class="am-u-sm-3 am-form-label">出生日期</label>
                                    <div class="am-u-sm-7">
                                        <input type="text" id="baby_birthday" name="enTryDate" class="am-form-field tpl-form-no-bg" placeholder="请输入宝宝出生日期" data-am-datepicker="" readonly="" required="required" />
                                    </div>
                                    <div class="am-u-sm-2">
                                        <small>必填！</small>
                                    </div>
                                </div>

                                <!-- 喂养史-->
                                <div class="am-form-group am-u-md-12 am-u-lg-6">
                                    <label class="am-u-sm-3 am-form-label">喂养史</label>
                                    <div class="am-u-sm-7">
                                        <textarea id="feed" class="am-form-field tpl-form-no-bg" placeholder="请输入宝宝喂养史，最多不超过200" maxlength="200"></textarea>
                                    </div>
                                    <div class="am-u-sm-2">
                                    </div>
                                </div>                                

                                <!-- 过敏史-->
                                <div class="am-form-group am-u-md-12 am-u-lg-6">
                                    <label class="am-u-sm-3 am-form-label">过敏史</label>
                                    <div class="am-u-sm-7">
                                        <textarea id="allergy" class="am-form-field tpl-form-no-bg" placeholder="请输入宝宝过敏史，最多不超过200" maxlength="200"></textarea>
                                    </div>
                                    <div class="am-u-sm-2">
                                    </div>
                                </div>

                                <!-- 病史-->
                                <div class="am-form-group am-u-md-12 am-u-lg-6">
                                    <label class="am-u-sm-3 am-form-label">病史</label>
                                    <div class="am-u-sm-7">
                                        <textarea id="medical_history" class="am-form-field tpl-form-no-bg" placeholder="请输入宝宝病史"></textarea>
                                    </div>
                                    <div class="am-u-sm-2">
                                    </div>
                                </div>

                                <!-- 备注-->
                                <div class="am-form-group am-u-md-12 am-u-lg-6">
                                    <label class="am-u-sm-3 am-form-label">备注</label>
                                    <div class="am-u-sm-7">
                                        <textarea id="notes" class="am-form-field tpl-form-no-bg" placeholder="请输入宝宝备注"></textarea>
                                    </div>
                                    <div class="am-u-sm-2">
                                    </div>
                                </div>

                                <!-- 按钮 -->
                                <div class="am-form-group am-u-md-12 am-u-lg-12">
                                    <span class="am-u-sm-3">
                                    </span>
                                    <div class="am-u-sm-7 am-u-sm-push-3">
                                        <button type="button" class="am-btn am-btn-primary tpl-btn-bg-color-success am-u-sm-5" data-am-modal-close="">取消</button>
                                        <span class="am-u-sm-2">
                                        </span>
                                        <button type="submit" href="javascript: void(0)" id="form_submit" class="am-btn am-btn-primary tpl-btn-bg-color-success am-u-sm-5" data-am-modal-close>提交</button>
                                    </div>
                                    <span class="am-u-sm-2">
                                    </span>
                                </div>

                            </form>
                        </div> 
                    </div>
                </div>                                
            </div>
        </div>
    </div>    

<script src="assets/js/amazeui.min.js"></script>
<script src="assets/js/amazeui.datatables.min.js"></script>
<script src="assets/js/dataTables.responsive.min.js"></script>
<script src="assets/js/app.js"></script>
<script>
function LoadImg(){
	var loadImg;
	var files = document.getElementById('photo_up').files;
		if(files){
			var windowURL = window.URL || window.webkitURL;
		    loadImg = windowURL.createObjectURL(files[0]);
		    document.getElementById('baby_photo').setAttribute('src',loadImg);//这里应该是点击图片确定后再加载
            return loadImg;
		}else{
            alert("请选择一张宝宝图片！");
            return false;
		}
}
$("#form_submit").on("click",function(){
    if($("#record_id").val() == "" || $("#baby_name").val() == "" ||$("#baby_age").val() == "" || $("#baby_weight").val() == "" || $("#baby_height").val() == "" || $("#baby_birthday").val() == "" ){
        alert("请输入完整信息");
        return false;
    }
    var loadImg = LoadImg();
    var obj = document.getElementById("baby_sex");
    var baby_sex = obj.options[obj.selectedIndex].text;
    var baby_form = {
    	"record_id":$("#record_id").val(),
    	"baby_name":$("#baby_name").val(),
    	"baby_photo":loadImg,
    	"baby_sex":baby_sex,
    	"baby_age":$("#baby_age").val(),
    	"baby_weight":$("#baby_weight").val(),
    	"baby_height":$("#baby_height").val(),
    	"baby_birthday":$("#baby_birthday").val(),
    	"ispremature":$("#ispremature input[name='ispre']:checked").val(),
    	"feed":$("#feed").val(),
    	"allergy":$("#allergy").val(),
    	"medical_history":$("#medical_history").val(),
    	"notes":$("#notes").val(),
	};

    console.table(baby_form);
    alert("宝宝信息提交成功！");
});
</script>

<script language="JavaScript" >
function onlyNumber(obj){
//先把非数字的都替换掉，除了数字和. 
obj.value = obj.value.replace(/[^\d\.]/g,''); 
//必须保证第一个为数字而不是. 
obj.value = obj.value.replace(/^\./g,''); 
//保证只有出现一个.而没有多个. 
obj.value = obj.value.replace(/\.{2,}/g,'.'); 
//保证.只出现一次，而不能出现两次以上 
obj.value = obj.value.replace('.','$#$').replace(/\./g,'').replace('$#$','.');
}
</script>

</body>

</html>